<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">会员昵称：</span>
                <el-input placeholder="输入会员昵称" v-model.trim="user_name" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">会员UID：</span>
                <el-input placeholder="输入会员UID" v-model.trim="user_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">手机号：</span>
                <el-input placeholder="输入手机号" v-model.trim="tel" oninput="value=value.replace(/[^\d]/g,'')" maxlength="11" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">推荐人ID：</span>
                <el-input placeholder="输入推荐人ID" v-model.trim="tjr_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">代理商等级：</span>
                <el-select v-model="agent_level" clearable placeholder="请选择代理商等级">
                    <el-option label="一级代理" value="1" />
                    <el-option label="二级代理" value="2" />
                    <el-option label="三级代理" value="3" />
                    <el-option label="省级运营中心" value="4" />
                    <el-option label="市级运营中心" value="5" />
                    <el-option label="县级运营中心" value="6" />
                </el-select>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">成为代理商时间：</span>
                <el-date-picker
                    v-model="area_time"
                    type="daterange"
                    unlink-panels
                    value-format="YYYY-MM-DD"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </div>
            <div class="task-one__btn task-wrap-btn clearfix" style="padding-left: 84px">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
        </div>
        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column label="用户信息" min-width="320" fixed="left">
                <template #default="{ row }">
                    <div class="table-lr">
                        <el-image class="table-lr__img img-round img-small" loading="lazy" :src="proxy.imgUrl + row.face + '!img_400'" fit="cover" v-if="row.face" />
                        <div class="table-lr__right small-right">
                            <div>
                                <p class="lr-title line-one">{{ row.nickname }}</p>
                            </div>
                            <p class="lr-text">UID：{{ row.uid }}，手机号：{{ row.mobile }}</p>
                            <p class="lr-text">推荐人：{{ row.tjr }}</p>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="agent_level" label="代理商等级" min-width="130">
                <template #default="{ row }">
                    <!-- 是否为区域代理[0:否,1:是] -->
                    <div v-if="row.is_partner == 1">
                        <p v-if="row.partner_level == 1">省级运营中心</p>
                        <p v-else>{{ row.partner_level == 2 ? "市级运营中心" : "县级运营中心" }}</p>
                    </div>
                    <!-- 是否为非区域代理商[0:否,1:是] -->
                    <div v-if="row.is_agent == 1">
                        <p v-if="row.agent_level == 1">一级代理商</p>
                        <p v-else>{{ row.agent_level == 2 ? "二级代理商" : "三级代理商" }}</p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="orders" label="订单数" min-width="100"></el-table-column>
            <el-table-column label="佣金明细" min-width="150">
                <template #default="{ row }">
                    <p>佣金余额: {{ row.award || "0.00" }}</p>
                    <p>总佣金: {{ row.total_award || "0.00" }}</p>
                </template>
            </el-table-column>
            <el-table-column label="推荐代理" min-width="160">
                <template #default="{ row }">
                    <div>
                        <p v-if="row.agent_province_count > 0">省级运营中心推荐数：{{ row.agent_province_count }}</p>
                        <p v-if="row.agent_city_count > 0">市级运营中心推荐数：{{ row.agent_city_count }}</p>
                        <p v-if="row.agent_district_count > 0">县级运营中心推荐数：{{ row.agent_district_count }}</p>
                        <p v-if="row.agent_one_count > 0">一级代理推荐数：{{ row.agent_one_count }}</p>
                        <p v-if="row.agent_two_count > 0">二级代理推荐数：{{ row.agent_two_count }}</p>
                        <p v-if="row.agent_three_count > 0">三级代理推荐数：{{ row.agent_three_count }}</p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="team_num" label="团队人数"></el-table-column>
            <el-table-column label="操作" width="290" class-name="operation-nav" fixed="right">
                <template #default="{ row }">
                    <el-button link type="primary" class="theme-btn" @click="clickDetail(row)">详情</el-button>
                    <el-button link type="primary" class="theme-btn" @click="clickMember(row)">推荐会员</el-button>
                    <el-button class="theme-btn" link type="primary" @click="clickAgentNo(row)" v-if="row.is_agent == 1">编辑非区域代理</el-button>
                    <el-button class="theme-btn" link type="primary" @click="clickAgentArea(row)" v-if="row.is_partner == 1">编辑运营中心</el-button>
                    <el-popconfirm
                        title="是否取消非区域代理资格？"
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                        @confirm="clickCancel(row, 1)"
                        v-if="row.is_agent == 1"
                    >
                        <template #reference>
                            <el-button link type="primary" class="theme-btn">取消非区域代理资格</el-button>
                        </template>
                    </el-popconfirm>
                    <el-popconfirm
                        title="是否取消区域代理资格？"
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                        @confirm="clickCancel(row, 2)"
                        v-if="row.is_partner == 1"
                    >
                        <template #reference>
                            <el-button link type="primary" class="theme-btn">取消区域代理资格</el-button>
                        </template>
                    </el-popconfirm>
                    <el-button link type="primary" class="theme-btn" @click="clickFinance(row)">财务报表</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>

        <!-- 设置非区域代理商 -->
        <el-dialog
            v-model="dialogAgentOne"
            title="设置非区域代理商"
            width="640px"
            :append-to-body="true"
            :destroy-on-close="true"
            @close="closeAgentOne"
        >
            <el-form ref="ruleRefAgentOne" :model="ruleFormAgentOne" :rules="ruleCheckAgentOne" label-width="140px">
                <el-form-item label="代理商等级" prop="agent_level">
                    <el-select v-model="ruleFormAgentOne.agent_level" clearable placeholder="请选择代理商等级" style="width: 300px">
                        <el-option :label="item.label" :value="item.agent_level" v-for="item in no_agents" :key="item.agent_level" />
                    </el-select>
                </el-form-item>
                <el-form-item label="返佣比例" prop="ratio">
                    <el-input
                        v-model.trim="ruleFormAgentOne.ratio"
                        oninput="value=value.replace(/[^\d.]/g,'')"
                        clearable
                        placeholder="请输入整数或小数(保留两位小数)"
                    />
                    <span class="input-icon">%</span>
                </el-form-item>
                <!-- <el-form-item label="到期时间" prop="end_time">
                    <el-date-picker v-model="ruleFormAgentOne.end_time" type="date" value-format="YYYY-MM-DD" placeholder="请选择到期时间" />
                </el-form-item> -->
                <!-- <el-form-item label="备注" prop="remarks">
                    <el-input v-model.trim="ruleFormAgentOne.remarks" type="textarea" clearable :rows="4" placeholder="请输入备注" />
                </el-form-item> -->
                <el-form-item>
                    <div class="flexs" style="margin-top: 20px">
                        <el-button type="primary" :loading="form_loading" @click="submitFormAgentOne(ruleRefAgentOne)">确认</el-button>
                        <el-button @click="resetFormAgentOne(ruleRefAgentOne)">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 设置区域代理 -->
        <el-dialog
            v-model="dialogAgentTwo"
            title="编辑区域代理"
            width="720px"
            :append-to-body="true"
            :destroy-on-close="true"
            @close="closeAgentTwo"
        >
            <el-form ref="ruleRefAgentTwo" :model="ruleFormAgentTwo" :rules="ruleCheckAgentTwo" label-width="140px">
                <el-form-item label="代理商等级" prop="agent_level">
                    <el-select
                        v-model="ruleFormAgentTwo.agent_level"
                        clearable
                        placeholder="请选择代理商等级"
                        style="width: 300px"
                        @change="changeSelectArea"
                    >
                        <el-option :label="item.label" :value="item.agent_level" v-for="item in area_agent" :key="item.agent_level" />
                    </el-select>
                    <div class="input-tips">
                        当前等级为<code>省级</code>则只需选<code>省份</code>，为<code>市级</code>时需选择<code>省市</code>依次类推
                    </div>
                </el-form-item>
                <el-form-item class="area-select" label="选择区域" v-if="ruleFormAgentTwo.agent_level != ''">
                    <el-select
                        v-model="ruleFormAgentTwo.prov_code"
                        clearable
                        placeholder="选择省份"
                        style="width: 130px"
                        v-show="ruleFormAgentTwo.agent_level <= 3"
                        @change="selectPrvo"
                    >
                        <el-option :label="item.name" :value="item.code" v-for="item in areaData.prov_arrs" :key="item.code" />
                    </el-select>
                    <el-select
                        v-model="ruleFormAgentTwo.city_code"
                        clearable
                        placeholder="选择城市"
                        style="width: 130px"
                        v-show="ruleFormAgentTwo.agent_level >= 2"
                        @change="selectCity"
                    >
                        <el-option :label="item.name" :value="item.code" v-for="item in areaData.city_arrs" :key="item.code" />
                    </el-select>
                    <el-select
                        v-model="ruleFormAgentTwo.region_code"
                        clearable
                        placeholder="选择县区"
                        style="width: 130px"
                        v-show="ruleFormAgentTwo.agent_level == 3"
                        @change="selectRegion"
                    >
                        <el-option :label="item.name" :value="item.code" v-for="item in areaData.region_arrs" :key="item.code" />
                    </el-select>
                    <el-button type="primary" @click.stop="addSelect">添加</el-button>
                    <!-- 选择的区域 -->
                    <div class="area-select-text" v-if="ruleFormAgentTwo.select_area.length > 0">
                        <div class="area-select__item flexs" v-for="(item, index) in ruleFormAgentTwo.select_area" :key="index">
                            <div class="area-select__title line-one">{{ item.info }}</div>
                            <span class="area-select__del" @click.stop="delAgents(index)">删除</span>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="返佣比例" prop="ratio">
                    <el-input
                        v-model.trim="ruleFormAgentTwo.ratio"
                        oninput="value=value.replace(/[^\d.]/g,'')"
                        clearable
                        placeholder="请输入整数或小数(保留两位小数)"
                    />
                    <span class="input-icon">%</span>
                </el-form-item>
                <!-- <el-form-item label="到期时间" prop="end_time">
                    <el-date-picker v-model="ruleFormAgentTwo.end_time" type="date" value-format="YYYY-MM-DD" placeholder="请选择到期时间" />
                </el-form-item> -->
                <!-- <el-form-item label="备注" prop="remarks">
                    <el-input v-model.trim="ruleFormAgentTwo.remarks" type="textarea" clearable :rows="4" placeholder="请输入备注" />
                </el-form-item> -->
                <el-form-item>
                    <div class="flexs" style="margin-top: 20px">
                        <el-button type="primary" :loading="form_loading" @click="submitFormAgentTwo(ruleRefAgentTwo)">确认</el-button>
                        <el-button @click="resetFormAgentTwo(ruleRefAgentTwo)">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, reactive, watch,onBeforeUnmount } from "vue"
import { useRouter } from "vue-router"
import { Search } from "@element-plus/icons-vue"
import OneLoad from "@mixins/one-load"
import GoBack from "@components/GoBack.vue"

const router = useRouter()
const { proxy } = getCurrentInstance()

onMounted(() => {
    getList()
    getArea()
})

onBeforeUnmount(() => {
    
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, search_btn, loading, arr_data, totalNums, pubParams, pubRefreshParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        uid: user_id.value,
        so: user_name.value,
        agent_level: agent_level.value,
        invite_id: tjr_id.value,
        mobile: tel.value,
        s_time: area_time.value ? area_time.value[0] : "",
        l_time: area_time.value ? area_time.value[1] : "",
    }
    getdata("agent/index", params)
}

/**
 * 搜索
 * @param {String} user_name 会员名称
 * @param {String} user_id 会员ID
 * @param {String} area_time 注册时间段
 * @param {String} tel 手机号
 * @param {String} tjr_id 推荐人ID
 * @param {String} agent_level 代理商等级ID
 */
const user_name = ref("")
const user_id = ref("")
const area_time = ref("")
const tel = ref("")
const tjr_id = ref("")
const agent_level = ref("")
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

// 取消资格，1是非区域代理，2是区域代理
const clickCancel = (row, type) => {
    let url = type == 1 ? "agent/agentCancel" : "agent/partnerCancel"
    proxy.$axios
        .post(url, {
            uid: row.uid,
        })
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}

const form_loading = ref(false)

/**
 * 设置非区域代理商
 * @param {Boolean} dialogAgentOne 弹窗状态
 * @param {Object} ruleRefAgentOne 表单规则
 * @param {Object} ruleFormAgentOne  表单字段
 * @param {Array} ruleCheckAgentOne  表单提示
 */
const dialogAgentOne = ref(false)
const ruleRefAgentOne = ref(null)
const ruleFormAgentOne = reactive({
    id: "",
    agent_level: "",
    ratio: "0",
    // end_time: "",
    // remarks: "",
})
const ruleCheckAgentOne = reactive({
    ratio: [{ required: true, validator: proxy.$util.validNumOrPoint, trigger: "blur" }],
    agent_level: [{ required: true, message: "请选择代理商等级", trigger: "change" }],
    // end_time: [{ required: true, message: "请选择到期时间", trigger: "change" }],
    // remarks: [{ required: true, message: "请输入备注", trigger: "blur" }],
})
const submitFormAgentOne = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            form_loading.value = true
            let data = {
                uid: ruleFormAgentOne.id,
                agent_level: ruleFormAgentOne.agent_level,
                agent_award: ruleFormAgentOne.ratio,
            }
            proxy.$axios
                .post("agent/agentUpdate", data)
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        dialogAgentOne.value = false
                       proxy.$message({ message: "设置成功！", type: "success" })
                        pubParams(getList)
                    } else {
                        proxy.$message({message:res.data.msg,type:"error"})
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
const resetFormAgentOne = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
const clickAgentNo = (row) => {
    ruleFormAgentOne.id = row.uid
    ruleFormAgentOne.agent_level = row.agent_level
    ruleFormAgentOne.ratio = row.agent_award
    dialogAgentOne.value = true
}
const closeAgentOne = () => {
    resetFormAgentOne(ruleRefAgentOne.value)
    dialogAgentOne.value = false
}
// 获取非区域代理数据
const no_agents = ref([
    {
        agent_level: 1,
        label: "一级代理商",
    },
    {
        agent_level: 2,
        label: "二级代理商",
    },
    {
        agent_level: 3,
        label: "三级代理商",
    },
])

/**
 * 设置区域代理商
 * @param {Boolean} dialogAgentTwo 弹窗状态
 * @param {Object} ruleRefAgentTwo 表单规则
 * @param {Object} ruleFormAgentTwo  表单字段
 * @param {Array} ruleCheckAgentTwo  表单提示
 */
const dialogAgentTwo = ref(false)
const ruleRefAgentTwo = ref(null)
const ruleFormAgentTwo = reactive({
    id: "",
    agent_level: "",
    ratio: "0",
    prov_name: "",
    city_name: "",
    region_name: "",
    select_area: [],
    prov_code: "",
    city_code: "",
    region_code: "",
    // end_time: "",
    // remarks: "",
})
const ruleCheckAgentTwo = reactive({
    ratio: [{ required: true, validator: proxy.$util.validNumOrPoint, trigger: "blur" }],
    agent_level: [{ required: true, message: "请选择代理商等级", trigger: "change" }],
    end_time: [{ required: true, message: "请选择到期时间", trigger: "change" }],
    remarks: [{ required: true, message: "请输入备注", trigger: "blur" }],
})
const submitFormAgentTwo = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            form_loading.value = true
            let data = {
                uid: ruleFormAgentTwo.id,
                partner_level: ruleFormAgentTwo.agent_level,
                partner_award: ruleFormAgentTwo.ratio,
                area: ruleFormAgentTwo.select_area,
            }
            proxy.$axios
                .post("agent/partnerUpdate", data)
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        dialogAgentTwo.value = false
                        proxy.$message({ message: "设置成功！", type: "success" })
                        pubParams(getList)
                    } else {
                        proxy.$message({message:res.data.msg,type:"error"})
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
const resetFormAgentTwo = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
const clickAgentArea = (row) => {
    getEditArea(row.uid)
    setTimeout(() => {
        dialogAgentTwo.value = true
        ruleFormAgentTwo.id = row.uid
        ruleFormAgentTwo.agent_level = row.partner_level
        ruleFormAgentTwo.ratio = row.partner_award
    }, 150)
}
function getEditArea(uid) {
    proxy.$axios
        .get("agent/partnerUpdate", {
            params: {
                uid,
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                let arrs = []
                result.partner_area.map((item) => {
                    arrs.push({
                        info: item.area_info,
                        code: item.area_code,
                    })
                })
                ruleFormAgentTwo.select_area = arrs
            }
        })
        .catch((err) => {})
}
const closeAgentTwo = () => {
    resetFormAgentTwo(ruleRefAgentTwo.value)
    dialogAgentTwo.value = false
}
// 获取区域代理数据
const area_agent = ref([
    {
        agent_level: 1,
        label: "省级运营中心",
    },
    {
        agent_level: 2,
        label: "市级运营中心",
    },
    {
        agent_level: 3,
        label: "县级运营中心",
    },
])

// 添加选中的代理区域
const addSelect = () => {
    if (ruleFormAgentTwo.agent_level == 1 && ruleFormAgentTwo.prov_code == "") {
        proxy.$message({ message: "请选择省份", type: "warning" })
        return
    }
    if (ruleFormAgentTwo.agent_level == 2 && (ruleFormAgentTwo.prov_code == "" || ruleFormAgentTwo.city_code == "")) {
        proxy.$message({ message: "请完善省市选择", type: "warning" })
        return
    }
    if (
        ruleFormAgentTwo.agent_level == 3 &&
        (ruleFormAgentTwo.prov_code == "" || ruleFormAgentTwo.city_code == "" || ruleFormAgentTwo.region_code == "")
    ) {
        proxy.$message({ message: "请完善省市区选择", type: "warning" })
        return
    }
    let name = "",
        code = ""
    if (ruleFormAgentTwo.agent_level == 1) {
        name = ruleFormAgentTwo.prov_name
        code = ruleFormAgentTwo.prov_code
    } else {
        name =
            ruleFormAgentTwo.agent_level == 2
                ? ruleFormAgentTwo.prov_name + ruleFormAgentTwo.city_name
                : ruleFormAgentTwo.prov_name + ruleFormAgentTwo.city_name + ruleFormAgentTwo.region_name
        code = ruleFormAgentTwo.agent_level == 2 ? ruleFormAgentTwo.city_code : ruleFormAgentTwo.region_code
    }
    let indexs = ruleFormAgentTwo.select_area.findIndex((item) => item.code === code)
    if (indexs > -1) {
        proxy.$message({ message: "不能重复添加相同区域", type: "warning" })
        return
    }
    ruleFormAgentTwo.select_area.push({
        info: name,
        code,
    })
    ruleFormAgentTwo.prov_name = ""
    ruleFormAgentTwo.city_name = ""
    ruleFormAgentTwo.region_name = ""
    ruleFormAgentTwo.prov_code = ""
    ruleFormAgentTwo.city_code = ""
    ruleFormAgentTwo.region_code = ""
}
const delAgents = (index) => {
    ruleFormAgentTwo.select_area.splice(index, 1)
}
// 当区域代理等级变化时，清空已添加的等级
const changeSelectArea = (val) => {
    ruleFormAgentTwo.select_area = []
}

/**
 * 获取和选择省市区，代理商等级选择了省级则只显示省级，依次类推
 */
const areaData = reactive({
    prov_arrs: [],
    city_arrs: [],
    region_arrs: [],
})
const selectPrvo = (val) => {
    let index = areaData.prov_arrs.findIndex((item) => item.code == val)
    if (index > -1) {
        ruleFormAgentTwo.prov_name = areaData.prov_arrs[index].name
        areaData.city_arrs = areaData.prov_arrs[index].children
    }
}
const selectCity = (val) => {
    let index = areaData.city_arrs.findIndex((item) => item.code == val)
    if (index > -1) {
        ruleFormAgentTwo.city_name = areaData.city_arrs[index].name
        areaData.region_arrs = areaData.city_arrs[index].children
    }
}
const selectRegion = (val) => {
    let index = areaData.region_arrs.findIndex((item) => item.code == val)
    if (index > -1) {
        ruleFormAgentTwo.region_name = areaData.region_arrs[index].name
    }
}
function getArea() {
    proxy.$axios
        .get("config_area.json")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                let arrs = []
                result.forEach((item) => {
                    arrs = arrs.concat(item.children)
                })
                areaData.prov_arrs = arrs
            }
        })
        .catch((err) => {})
}

// 财务报表
const clickFinance = (row) => {
    router.push({
        path: "/Agent/AgentFinanceChart",
        query: {
            uid: row.uid,
        },
    })
}

// 推荐会员
const clickMember = (row) => {
    router.push({
        path: "/Agent/AgentMember",
        query: {
            uid: row.uid,
        },
    })
}

const clickDetail = (row) => {
    router.push({
        path: "/Member/MemberDetail",
        query: {
            uid: row.uid,
        },
    })
}
</script>

<script>
export default {
    name: "AgentList",
}
</script>

<style lang="less" scoped>
.input-icon {
    margin-left: @margin-sm;
    color: @gray-7;
}
:deep(.el-date-editor) {
    .el-input__wrapper {
        width: 340px;
    }
}

.area-select {
    :deep(.el-select) {
        margin-right: @margin-xs;
        .el-input {
            width: 130px;
        }
    }
}
.area-select-text {
    clear: both;
    width: 350px;
    .area-select__item {
        width: 100%;
        margin-top: 6px;
        overflow: hidden;
        line-height: 20px;
        .area-select__title {
            font-size: 14px;
            color: #555;
            flex: 1;
        }
        .area-select__del {
            flex: none;
            margin-left: 20px;
            color: #4b93fa;
            cursor: pointer;
        }
    }
}
</style>
